<template>
    <div style="width: 100%" v-show="show">
        <el-collapse v-model="activeName">
            <el-collapse-item title="关系" name="1">
                <avue-crud :option="option"
                           :table-loading="loading"
                           :data="data.refenrenceList?data.refenrenceList:[]"
                           ref="crud">
                </avue-crud>
            </el-collapse-item>
            <el-collapse-item title="继承的关系" name="2">
                <avue-crud :option="option"
                           :table-loading="loading"
                           :data="data.extendRefenrenceList?data.extendRefenrenceList:[]"
                           ref="crud">
                </avue-crud>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import {getRelation} from "@/api/modulManage/relation";

export default {
    name: "Relation",
    inject: ["allFormData"],
    props: {
        show: {
            type: Boolean,
            default: () => {
                return false;
            }
        }
    },
    data() {
        return {
            data: [],
            activeName: ["1", "2"],
            loading: false,
            option: {
                height: '300px',
                calcHeight: 30,
                dialogWidth: 900,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: false,
                selection: false,
                labelWidth: 120,
                // menuWidth: 200,
                viewBtn: false,
                dialogClickModal: false,
                tabs: true,
                delBtn: false,
                addBtn: false,
                editBtn: false,
                refreshBtn: false,
                columnBtn: false,
                align: "center",
                menu: false,
                header: false,
                column: [
                    {
                        label: '关系英文名称',
                        prop: 'nameEn',
                    },
                    {
                        label: "关系中文名称",
                        prop: "nameCn",
                    },
                    {
                        label: "Form实体中文名称",
                        prop: "fromName",
                    },
                    {
                        label: "To实体中文名称",
                        prop: "toName",
                    },
                    {
                        label: "连接类型",
                        prop: "refType",
                        dicData: [
                            {
                                label: "一对一",
                                value: 1,
                            },
                            {
                                label: "一对多",
                                value: 2,
                            },
                            {
                                label: "多对多",
                                value: 3,
                            },
                        ]
                    },
                    {
                        label: "是否树形",
                        prop: "isTree",
                        dicData: [
                            {
                                label: "是",
                                value: 1,
                            },
                            {
                                label: "否",
                                value: 0,
                            },
                        ]
                    }
                ]
            },
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 1
            },
        }
    },
    methods: {
        getTabData() {
            return {form: {}, flag: false}
        }
    },
    watch: {
        show: {
            handler(v) {
                if (v) {
                    let {oid} = this.allFormData();
                    getRelation({oid: oid}).then(res => {
                        this.data = res.data.data;
                    })
                }
            }
        }
    }
}
</script>

<style scoped>

</style>
